<%- include('common/header.html') %>

<link rel="stylesheet" href="/index/css/article.css" />
<link rel="stylesheet" href="/index/animate.css">
<style>
  .content {
    position: absolute;
    left: 50%;
    transform: translateX(-600px);
    margin: auto;
    width: 1200px;
  }

  .vertical {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
  }

  .header_banner {
    /* position: relative; */
    height: 240px;
    width: 100%;
    background-color: rgba(38, 212, 239, 0.7);
    /* backgroundsize"true" */
    /* background: #22bdd7; */
    background-size: contain;
    /* background: url(/admin/uploads/file-1657731294681.jpg) no-repeat 0px 0px; */
    background-image: url('https://ccdn.goodq.top/caches/6519d4c1d4722a0f0d85a70bbee8ffbe/aHR0cHM6Ly81YWViZjhiNjA1OTMxLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTgvMDIvN2YyMmUxYzY4Y2E0ZDJhMDM3NmFlYzRlMzk4YzgzZjYtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: 0 0%;
    background-color: #22bdd7;
    /* background-size: 100% 100%; */
  }

  .banner_bgc_skyblue {
    background-color: rgba(38, 212, 239, 0.7);
    /* background-color: #000; */
    /* z-index: 99; */
  }

  .header_content {
    position: relative;
    left: 40%;
    transform: translateX(-600px);
    margin: auto;
    width: 1200px;
    height: 100%;
  }

  .header_text {
    position: absolute;
    width: 100%;
    height: 120px;
    top: 50%;
    transform: translateY(-60px);
  }

  .withe_solid {
    float: left;
    top: 65px;
    width: 65px;
    border-bottom: 6px solid #ffffff;
    /* margin-bottom: 20px; */
  }

  .header_title {
    margin-top: 20px;
  }

  .header_title h4 {
    color: #ffffff;
    font-size: 34px;
    font-weight: bold;
    vertical-align: bottom;
  }

  .header_text_tot p {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: #ffffff;
    padding: 10px 0 0 0;
    vertical-align: bottom;
  }

  .crumbs {
    height: 82px;
    width: 100%;
    background-color: #f7f7f7;
    margin-bottom: 50px;
  }

  .crumbs_text {
    position: absolute;
    /* height: 82px; */
    width: 100%;
    top: 30px;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    color: #333;
  }

  .crumbs_text span:hover {
    color: #44ebff;
    cursor: pointer;
  }

  .header {
    background-color: #fff;
  }

  .header_text {
    top: 55%;
  }

  .container_text_content_title>ul {
    padding-bottom: 9px;
  }

  .container_text_content_content {
    display: none;
  }

  .check_on_li {
    display: block;
  }

  li {
    border-style: none;
  }



  
  .coverInfo {
    height: 388px;
  }

  .swiper {
    width: 100%;
    height: 100%;
  }


  .swiper-slide {
    font-size: 13px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
  }

  .swiper-pagination-bullet-active {
    color: #fff;
    background: #5C697C;
  }

  .img_div {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
    border-radius: 150px
  }

  .swiper-slide {
    flex-shrink: 0
  }
</style>

<body>
  <!-- 内容头部的banner开始 -->
  <div class="banner_bgc_skyblue">
    <div class="header_banner">
      <div class="header_content">
        <div class="header_text">
          <div class="withe_solid w">
          </div>
          <div class="header_title">
            <h4>核心研发团队</h4>
          </div>
          <div class="header_text_tot">
            <p>
              十万用户的共同选择</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 内容头部的banner结束 -->
  <!-- <h1>Team</h1> -->
  <div class="coverInfo container ">
    <div class="swiper ">
      <div class="swiper-wrapper" style="margin: 0;">

        <div class="swiper-slide " id="pic_fir" style="width: 100%;float: left;">
          <div style="float: left;width: 10%;margin-right: 60px;"><img src="index/uploads/humsec.webp" class="img_div">
          </div>
          <div style="float: left;width: 64%;">
            <div class="row">
              <span style="color: #666666;font-size:22px;font-family:微软雅黑;float: left;margin-bottom: 10px;">技术工程师</span>
            </div>
            <div class="row">
              <span style=" letter-spacing:0px;line-height: 1.95em;font-family:'微软雅黑'">
                起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，
                还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。
              </span>
            </div>
          </div>
        </div>


        <div class="swiper-slide " id="pic_sec" style="width: 100%;float: left;">
          <div style="float: left;width: 10%;margin-right: 60px;"><img src="index/uploads/humfir.webp" class="img_div">
          </div>
          <div style="float: left;width: 64%;">
            <div class="row">
              <span style="color: #666666;font-size:22px;font-family:微软雅黑;float: left;margin-bottom: 10px;">技术工程师</span>
            </div>
            <div class="row">
              <span style=" letter-spacing:0px;line-height: 1.95em;font-family:'微软雅黑'">
                起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，
                还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。
              </span>
            </div>
          </div>
        </div>


      </div>
      <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"
        style="margin:0;bottom: 21%;left: 2%;">
        <span class="swiper-pagination-bullet swiper-pagination-bullet-active" id="spot_first"></span>
        <span class="swiper-pagination-bullet" id="spot_second"></span>
      </div>
      <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
  </div>

  <script>
    var spot_first = document.getElementById("spot_first");
    var spot_second = document.getElementById("spot_second");
    var pic_fir = document.getElementById("pic_fir");
    var pic_sec = document.getElementById("pic_sec");
    spot_first.onclick = function () {
      spot_first.style.background = '#5C697C';
      spot_second.style.background = '#CCCCCC';
      pic_fir.style.cssText =
        "transform:translateX(0%);-ms-transform:translateX(0%);-webkit-transform:translateX(0%);transition: all 0.45s linear;"
      pic_sec.style.cssText =
        "transform:translateX(0%);-ms-transform:translateX(0%);-webkit-transform:translateX(0%);transition: all 0.45s linear;"

    }
    spot_second.onclick = function () {
      spot_first.style.background = '#CCCCCC';
      spot_second.style.background = '#5C697C';

      pic_fir.style.cssText =
        "transform:translateX(-100%);-ms-transform:translateX(-100%);-webkit-transform:translateX(-100%);transition: all 0.45s linear;"
      pic_sec.style.cssText =
        "transform:translateX(-100%);-ms-transform:translateX(-100%);-webkit-transform:translateX(-100%);transition: all 0.45s linear;"
    }
  </script>


  <%- include('common/footer.html') %>
</body>

</html>